<!DOCTYPE html>
<html lang="en" style="width: 100%;height: 100%">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

</head>
<body style="width: 100%;height: 100%;margin: 0px;">
<div id="app" style="padding: 10px;">
    <el-row style="margin-bottom:10px;" :gutter="10">
        <el-col :span="6">
            <el-input placeholder="请输入表名" v-model="params.tableName" clearable>
            </el-input>
        </el-col>
        <el-col :span="12">
            <el-button type="primary" @click="loadData">查询</el-button>
            <el-button type="success" @click="visible = true">生成代码</el-button>
        </el-col>
    </el-row>
    <el-table ref="multipleTable" :data="dataList"
              @selection-change="handleSelectionChange" tooltip-effect="dark" style="width: 100%" max-height="500"
              border>
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="tableName" label="表名" width="200">
        </el-table-column>
        <el-table-column prop="tableComment" label="备注" width="400">
        </el-table-column>
        <el-table-column prop="ENGINE" label="存储引擎" width="200">
        </el-table-column>
        <el-table-column prop="createTime" label="创建日期" width="300">
        </el-table-column>
    </el-table>
    <el-dialog :visible.sync="visible" title="生成代码-参数配置">
        <el-form label-width="80px">
            <el-form-item label="包名：">
                <el-input placeholder="请输入基础包名" v-model="packageName"></el-input>
            </el-form-item>
            <el-form-item label="模块名：">
                <el-input placeholder="请输入模块名" v-model="moduleName"></el-input>
            </el-form-item>
            <el-form-item label="表前缀：">
                <el-input placeholder="表前缀" v-model="tablePrefix"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="doNow">立即生成</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="application/javascript">

    new Vue({
        el: '#app',

        data: function () {
            return {
                dataList: [],
                params: {
                    tableName: "",
                    pageIndex: 1,
                    pageSize: 100
                },
                labelPosition: "left",
                visible: false,
                multipleSelection: [],
                packageName: "com.aos.erp",
                moduleName: "test",
                tablePrefix:"t_",
            }
        },
        created() {
            this.loadData();
        },
        methods: {
            loadData() {
                var that = this;
                axios.get('/generator/data/list', {params: this.params})
                    .then(function (response) {
                        that.dataList = response.data.data.records;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            doNow() {
                var uri = "/generator/code?";
                uri = uri + "packageName=" + this.packageName + "&moduleName=" + this.moduleName+ "&tablePrefix=" + this.tablePrefix;

                for (var i = 0; i < this.multipleSelection.length; i++) {
                    uri = uri + "&tableNames[]=" + this.multipleSelection[i].tableName;
                }
                window.open(encodeURI(uri));
            },
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            }
        }
    })
</script>
</html>